<template>
  <div class="menu" ref="box">
    <home-header ></home-header>
        <div class="bigBox">
            <div class="h_lis_box">
                <div class="lis_box" v-for="item in menuList" :key="item.id">
                    <div class="brand_box">{{item.name}} <span>全部</span></div>
                    <ul class="sft_box">
                        <li  v-for="item in item.properties" :key="item.id">{{item.name}}</li>
                    </ul>
                </div>
            </div>
            <div class="b_shop_Box" >
                <template>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane v-for="item in title" :key='item.index' :label="item" :name="item.index" >
                            <template>
                                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-distance="1000px">
                                    <li  v-for="item in shop_items" class="infinite-list-item" :key="item.id" @click="toDetail(item.id)">
                                        <img :src="item.picture" alt="">
                                        <p class='name'>{{item.name}}</p>
                                        <p class="desc">{{item.desc}}</p>
                                        <p class="price">￥{{item.price}}</p>
                                    </li>
                                </ul>
                                <p v-if="loading">加载中...</p>
                                <p v-if="noMore">没有更多了</p>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
    <home-footer></home-footer>
  </div>
</template>

<script>
import HomeHeader from '@/common/HomeHeader.vue'
import HomeFooter from '@/common/HomeFooter.vue'
export default {
    name:"MenuView",
    components: { HomeHeader, HomeFooter },
    data(){
        return {
            menuList:"",
            activeName: '0',
            shop_items:'',
            title:[
                "默认排序","最新商品","最高人气","评论最多"
            ],
            count: 1,
            loading: false

        }
    }, 
    computed: {
      noMore () {
        return this.count >= 50
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods:{
        load () {
            this.loading = true
            setTimeout(async () => {
                this.count += 1
                let lis2 = await this.$http.menuLisApi({page:this.count})
                this.shop_items = this.shop_items.concat(lis2.data.result.items)
                this.loading = false
            }, 2000)
        },
        toDetail(id){
            this.$router.push({
                path:"/details",
                query:{
                    id
                }
            })
        },
        async handleClick() { 
            let lis2 = await this.$http.menuLisApi(this.count)
            this.shop_items = lis2.data.result.items
        },
        async demo(data){
            let lis= await this.$http.menuApi(data);
            this.menuList = lis.data.result.saleProperties 
            // console.log(lis)
            // console.log(111)
            let lis2 = await this.$http.menuLisApi(this.count)
            this.shop_items = lis2.data.result.items
        },
    },
    watch: {
        $route:{
            handler:async function(to,oldVal){
                console.log(to.query.id)
                console.log(oldVal)
                let data = await this.$http.menuApi({id:to.query.id});
                console.log(data)
                // this.list=res.data.result
            },
            immediate:true,
            deep:true
        }
    },
    created(){
        this.$bus.$on("sss",this.demo)
        this.handleClick()
        // this.demo()
    },
   
}
</script>

<style lang="less" scoped>
    *{margin: 0;padding: 0;}
    li{list-style: none;}
    a{text-decoration: none;}
    .menu {
        // overflow-y:scroll;
        height:100vh;
    }
    .bigBox {
        background:#F5F5F5;
        padding-top:20px;
        .h_lis_box {
            width:80%;
            margin:20px auto 20PX;
            background:white;
            // box-sizing: border-box;
            padding:35px 0 0 25px;
            .lis_box {
                display:flex;
                .brand_box {
                    padding:0 10px;
                    width:10vw;
                    align-items:top;
                    box-sizing: border-box;
                    color:#999999;
                    span {
                        float:right;
                        margin-right:10px;
                        color:#27BA9B;
                    }
                }
                .sft_box{
                    width: 90vw;
                    display: flex;
                    flex-wrap: wrap;
                    li{
                     margin:0 36px 24px 0;
                    }
                    li:hover {
                        color:#27BA9B;
                    }
                }
            }
        }
        .b_shop_Box {
            width:  80vw;
            margin: 0 auto;
            background:white;
            // height:400px;
            .el-tabs--card>.el-tabs__header .el-tabs__item {
                margin-left:20px;
            }
            .el-tab-pane {
                display:flex;
                flex-wrap:wrap;
                .infinite-list-item {
                    width:20%;
                    padding:10px;
                    box-sizing: border-box;
                    float:left;
                    img {
                        width:160px;
                        height:160px;
                        display:block;
                        margin:auto;
                    }
                    .name {
                        width:160px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin:5px auto;
                    }
                    .desc {
                        width:160px;
                        color:#999999;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;font-size:14px;

                        margin:0 auto;
                    }
                    .price {
                        width:160px;
                        color:red;
                        margin:0 auto;
                        text-align:center;
                    }
                }
            }
        }
    }
</style>>
